<template>
  <div class="cart">
    <my-nav-bar
      title="购物车"
      :right-text="isDel ? '完成' : '编辑'"
      @click-right="isDel = !isDel"
    ></my-nav-bar>
    <div class="content">
      <van-swipe-cell v-for="(item, index) in cartList" :key="item.goods_id">
        <div class="goods_box">
          <van-checkbox v-model="item.flag" @change="checkOne"></van-checkbox>
          <img :src="item.goods_small_logo" alt="" />
          <section>
            <h4>{{ item.goods_name }}</h4>
            <div class="foot-rt">
              <span>￥{{ item.goods_price }}</span>
              <van-stepper v-model="item.buyNum" />
            </div>
          </section>
        </div>
        <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            class="delete-button"
            @click="$store.commit('delCart', index)"
          />
        </template>
      </van-swipe-cell>
    </div>
    <van-submit-bar
      :price="allPrice"
      :button-text="isDel ? '删除所选' : '提交订单'"
      @submit="onSubmit"
    >
      <van-checkbox v-model="checked" @click="checkAll">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
import { mapState } from "vuex";
import store from "../../store/index";
export default {
  data() {
    return {
      checked: false, // 全选的变量
      isDel: false, // 是提交订单还是删除
    };
  },
  computed: {
    ...mapState(["cartList"]),
    allPrice() {
      // 总价
      // let price = 0;
      // this.cartList.forEach((item) => {
      //   if (item.flag) {
      //     price += item.goods_price * item.buyNum;
      //   }
      // });
      // return price * 100;
      return (
        this.cartList.reduce((a, b) => a + (b.flag ? b.goods_price * b.buyNum : 0), 0) *
        100
      );
    },
  },
  // created() {
  //   if (!this.$store.state.token) {
  //     this.$router.push("/login");
  //   }
  // },
  beforeRouteEnter(to, from, next) {
    // 组件路由守卫
    if (!store.state.token) {
      next("/login");
    } else {
      next();
    }
  },
  methods: {
    onSubmit() {
      // 点击提交触发的事件
      if (this.isDel) {
        // 值为 true 走的是删除的逻辑
        this.$store.commit("delectCart");
        this.checked = this.cartList.every((item) => item.flag);
      }
    },
    checkAll() {
      // 全选的事件
      this.cartList.forEach((item) => {
        item.flag = this.checked;
      });
    },
    checkOne() {
      // 单选的事件
      this.checked = this.cartList.every((item) => item.flag);
      console.log(this.checked);
    },
  },
};
</script>

<style lang="scss" scoped>
.cart {
  .goods_box {
    display: flex;
    align-items: center;
    font-size: 15px;
    padding: 3px 10px;
    box-sizing: border-box;

    img {
      width: 60px;
      margin: 0 10px;
    }
    section {
      flex: 1;
      overflow: hidden;
      h4 {
        line-height: 20px;
        width: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        margin-bottom: 10px;
      }
      .foot-rt {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
  .van-swipe-cell {
    margin-top: 10px;
    .delete-button {
      height: 100%;
    }
  }
}
.van-submit-bar {
  bottom: 50px;
}
</style>
